"use client";
import React, { useState, useEffect } from "react";
import {
  Space,
  Table,
  Form,
  Input,
  Button,
  Select,
  Flex,
  Modal,
} from "antd";
import type { TableProps } from "antd";
// 引入接口
import * as API from "../../../api/http";
import FormList from "../formlist";
interface DataType {
  id: number;
  key: string;
  title: string;
  name: string;
  money: string;
  type: string;
  ren: string;
  time: string;
}

export default function page() {
  // 获取数据
  const [table, setTable] = useState([]);
  const shuju = async () => {
    let res = await API.getlist();
    setTable(res as any);
  };
  // 搜索
  const onFinish = async (values: any) => {
    console.log(values.time, "| ----");

    let res = await API.searchlist(
      values.name,
      values.type,
      values.ren,
      values.time
    );
    setTable(res as any);
  };

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 定义文字与回显
  const [title, settitle] = useState("添加");
  const [objs, setobjs] = useState({});
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "订单编号",
      dataIndex: "key",
    },
    {
      title: "订单标题",
      dataIndex: "title",
    },
    {
      title: "关联客户",
      dataIndex: "name",
    },
    {
      title: "订单总金额",
      dataIndex: "money",
    },
    {
      title: "审批类型",
      dataIndex: "type",
    },
    {
      title: "创建人员",
      dataIndex: "ren",
    },
    {
      title: "提交时间",
      dataIndex: "time",
    },
    {
      title: "操作",
      dataIndex: "action",
      render: (_, store) => {
        return (
          <Space style={{ color: "#0079FE" }}>
            <p 
              onClick={() => {
                showModal();
                settitle("添加");
                setobjs({});
              }}
            >
              添加
            </p>
            <p
              onClick={() => {
                showModal();
                settitle("编辑");
                setobjs(store);
              }}
            >
              编辑
            </p>
            <p onClick={async()=>{
                await API.dellist(store.id)
                shuju()
            }}>删除</p>
          </Space>
        );
      },
    },
  ];
  useEffect(() => {
    shuju();
  }, []);
  return (
    <div>
      <Modal
        title={title}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose
        footer={null}
      >
        <FormList title={title} objs={objs} handleOk={handleOk} shuju={shuju} />
      </Modal>
      <Flex>
        <Form
          layout="horizontal"
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            width: "100%",
            marginBottom: "40px",
          }}
          onFinish={onFinish}
        >
          <Form.Item name="name" style={{ width: "180px" }}>
            <Input placeholder="搜索关键字" />
          </Form.Item>
          <Form.Item name="type" style={{ width: "180px" }}>
            <Select placeholder="审批类型">
              <Select.Option value="等待审批">等待审批</Select.Option>
              <Select.Option value="审批通过">审批通过</Select.Option>
              <Select.Option value="审批否决">审批否决</Select.Option>
              <Select.Option value="驳回审批">驳回审批</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="time" style={{ width: "180px" }}>
            <Input placeholder="提交时间" />
          </Form.Item>
          <Form.Item name="time" style={{ width: "180px" }}>
            <Input placeholder="审批时间" />
          </Form.Item>
          <Form.Item name="ren" style={{ width: "180px" }}>
            <Input placeholder="创建人员" />
          </Form.Item>
          <Form.Item style={{ width: "180px" }}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ background: "0079FE", width: "80px" }}
            >
              查询
            </Button>
            <Button
              onClick={() => {
                shuju();
              }}
              style={{ width: "80px" }}
            >
              重置
            </Button>
          </Form.Item>
        </Form>
      </Flex>
      <Table<DataType> columns={columns} dataSource={table} rowKey={"id"} />
    </div>
  );
}
